<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位与绝对定位</title>
		<!-- 
		①浮动定位：左右布局 
		②相对定位：微调布局针对单一元素
		position：relative；声明元素进行相对定位
		特点：相对与父级进行定位,不脱离文档流
		附加属性：方向属性：left,top,right
		属性值：正负数值px
		Z轴叠加属性：z-index--属性值：数值 数值越大 越靠前
		③绝对定位
		position:absulote
		特点:相对于祖先【页面左上顶角】进行定位
		使用方法：通常与相对定位搭配使用
		④固定定位：fiexd 页面区域固定在页面上
		相对，绝对，固定属性--附加属性全部通用：方向 叠加
		⑤文档流定位：按照元素分类进行定位：块与块【纵排】
		                                行与行
		-->
		<style>
/* box1和box2 300*300 */		
	div{
		width: 300px;
		height: 300px;
	}
	div.box1{
		background: url(img/image_3.png);
		background-size: 100%;
		/* 相对定位，相对就近父级 */
		position: absolute;
		left: 0;
		top: 0;  
		/* 叠加属性 */
		z-index: 102;
	}
	div.box2{
		background: url(img/image_4.png);
		background-size: 100%;
		position: relative;
		left: 0%;
		top: 0px;
		z-index: 101;
	}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>